<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>伪元素</title>
        <style type="text/css">
            div {
                margin: 15px 0;
                border: 1px solid blue;
            }

            /* 伪元素 */
            div::first-line {
                background-color: #dfdfdf;
            }

            div::first-letter {
                color: blue;
                font-size: 30px;
            }

            div a::before {
                content: '小芳';
            }

            div a::after {
                content: '村里有个姑娘';
            }
        </style>
    </head>
    <body>

        <h5>伪元素</h5>

        <div>
            古之学者必有师。
            师者，所以传道受业解惑也。
            人非生而知之者，孰能无惑？
            惑而不从师，其为惑也，终不解矣。
            生乎吾前，其闻道也固先乎吾，吾从而师之；
            生乎吾后，其闻道也亦先乎吾，吾从而师之。
            吾师道也，夫庸知其年之先后生于吾乎？
            是故无贵无贱，无长无少，道之所存，师之所存也。
        </div>

        <div>
            古之学者必有师。
            师者，所以传道受业解惑也。
            人非生而知之者，孰能无惑？
            惑而不从师，其为惑也，终不解矣。
            生乎吾前，其闻道也固先乎吾，吾从而师之；
            生乎吾后，其闻道也亦先乎吾，吾从而师之。
            吾师道也，夫庸知其年之先后生于吾乎？
            是故无贵无贱，无长无少，道之所存，师之所存也。
        </div>

        <div>
            <a href="#">开发喵</a>
            <br>
            <a href="#">kaifamiao</a>
        </div>

    </body>
</html>